<template>
  <views class="enterprise_invoice_apply">
    <!-- 新增地址 -->
    <div class="add_address">
      <!-- 新增/修改 模态框 -->
      <modelBox :show="add_addres_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="'新增开票地址'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model(1)"></div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">收件人姓名</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入姓名" v-model="name" clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">手机号码</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入手机号码" v-model="phone" clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">收货地址</div>
              <div class="add_input_lists_item">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  clearable
                  maxlength="80"
                  v-model="address"
                ></el-input>
              </div>
            </div>
          </div>

          <!--  设为默认地址  -->
          <div class="default_address flex flexR">
            <el-checkbox v-model="default_address">设为默认地址</el-checkbox>
          </div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="addressCommit">确定</el-button>
            <el-button type @click="close_Model(1)">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>
    <!-- 修改开票信息 -->
    <div class="modify_billing_infor">
      <modelBox :show="modify_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="'修改开票信息'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">发票抬头</div>
              <div class="add_input_lists_item">{{enterprise_info.bank_account_name}}</div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">税务登记号</div>
              <div class="add_input_lists_item">{{enterprise_info.enterprise_code}}</div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">注册电话</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入手机号码" v-model="enterprise_info.mobile" clearable></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">注册地址</div>
              <div class="add_input_lists_item">
                <el-input
                  type="textarea"
                  autosize
                  placeholder="请输入内容"
                  clearable
                  maxlength="80"
                  v-model="enterprise_info.address"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">开户银行</div>
              <div class="add_input_lists_item">
                <el-select v-model="bank" clearable placeholder="请选择">
                  <el-option
                    v-for="item in bank_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>

          <!-- 注释 -->
          <div class="annotation">注：请输入和营业执照对应的开票信息</div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="modify_info">确定</el-button>
            <el-button type @click="close_Model">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>


    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogVisibleImg" alt="">
    </el-dialog>

    <!--  申请开票 -->
    <div class="make_invoice">
      <modelBox :show="make_invoice_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="'申请开票'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">选择地址</div>
              <div class="add_input_lists_item">
                <el-select v-model="select_address" clearable placeholder="请选择">
                  <el-option
                    v-for="item in select_address_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">选择银行</div>
              <div class="add_input_lists_item">
                <el-select v-model="select_bank" clearable placeholder="请选择">
                  <el-option
                    v-for="item in select_bank_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">选择开票税目</div>
              <div class="add_input_lists_item">
                <el-select v-model="select_invoice_cats" clearable placeholder="请选择">
                  <el-option
                          v-for="item in invoice_cats"
                          :key="item"
                          :label="item"
                          :value="item"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">开票金额</div>
              <div class="add_input_lists_item">
                <el-input placeholder="请输入金额" clearable v-model="invoice_amount"></el-input>
              </div>
            </div>
          </div>
          <div class="add_input_lists add_input_lists_protocol flex flexR">
            <div class="add_input_lists_title">上传履约确认函</div>

            <div class="add_input_lists_item flex" >
              <el-upload
                      class="flex flexC"
                      :action="upload_file"
                      :on-preview="uploadProtocolPreview"
                      :on-change="uploadProtocolChange"
                      :on-success="uploadProtocolSuccess"
                      :on-remove="removeProtocol"
                      :file-list="apply_img"
                      :limit="1"
                      :on-exceed="onExceed"
                      accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>

            <div class="add_input_lists_item" >
              <el-link type="primary" :download="'download'" :href="$config.serverURL + 'template/履约确认函.docx'" target="_blank" >履约确认函模板下载</el-link>
            </div>
            <div class="add_input_lists_item" >
              <el-link type="primary" :download="'download'" :href="$config.serverURL + 'template/履约确认函.pdf'" target="_blank" >查看履约确认函示例</el-link>
            </div>
          </div>

          <div class="add_input_lists">
            <div class="flex flexR center add_inputs">
              <div class="add_input_lists_title">备注</div>
              <div class="add_input_lists_item">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入备注"
                v-model="remark">
              </el-input>
              </div>
            </div>
          </div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="applyInvoice">申请开票</el-button>
            <el-button type  @click="close_Model">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>

    <!-- 开票信息 -->
    <div class="billing_information">
      <div class="flex flexR billing_information_top">
        <viewTitle :title="'开票信息'" :border="false"></viewTitle>
        <div class="billing_information_top_btn" @click="modify_billing_infor" v-if="isEditHead">修改</div>
      </div>

      <div class="flex flexC billing_information_list">
        <div class="flex flexR billing_information_item">
          <div class="flex billing_information_item_width">
            <div class="Textl">发票抬头:</div>
            <div class="content">{{enterprise_info.bank_account_name}}</div>
          </div>
          <div class="flex billing_information_item_width">
            <div class="Textl">税务登记证号:</div>
            <div class="content">{{enterprise_info.enterprise_code}}</div>
          </div>
        </div>
        <div class="flex flexR billing_information_item">
          <div class="flex billing_information_item_width">
            <div class="Textl">注册电话:</div>
            <div class="content">{{enterprise_info.mobile}}</div>
          </div>
          <div class="flex billing_information_item_width">
            <div class="Textl">注册地址:</div>
            <div class="content">{{enterprise_info.address}}</div>
          </div>
        </div>
        <div class="flex flexR billing_information_item">
          <div class="flex billing_information_item_width">
            <div class="Textl">开户银行:</div>
            <div class="content">{{enterprise_info.bank_name}}</div>
          </div>
          <div class="flex billing_information_item_width">
            <div class="Textl">开户帐号:</div>
            <div class="content">{{enterprise_info.bank_sn}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 开票地址 -->
    <div class="billing_address">
      <div>
        <div class="flex flexR billing_information_top">
          <viewTitle :title="'开票地址'" :border="false"></viewTitle>
          <div class="billing_information_top_btn" @click="add_address" v-if="isAddAddress">+新增地址</div>
        </div>
        <!-- 地址列表 -->
        <div class="address_lists">
            

        <el-table
        border
        :data="address_lists"
        style="width: 100%;max-width:none;"
        :header-cell-style="getRowClass"
        :select-on-indeterminate="true"
        :fit="true"
        :lazy="true"
        max-height="450"
      >
        <el-table-column fixed type="index" label="序号" width="100"></el-table-column>
        <el-table-column fixed prop="receiver_name" label="收件人" width="200"></el-table-column>
        <el-table-column prop="receiver_mobile" label="电话" width="150"></el-table-column>
        <el-table-column prop="receiver_address" label="地址" width="auto"></el-table-column>
        <el-table-column prop="zip" label="操作"  width="150">
          <template slot-scope="scope">
            <div class="table_operation">
              <span v-if="scope.row.is_default">默认地址</span>
<!--                  <el-switch-->
<!--                    v-model=""-->
<!--                    disabled-->
<!--                    active-color="#13ce66"-->
<!--                    inactive-color="#DCDFE6">-->
<!--                  </el-switch>-->
            </div>
          </template>
        </el-table-column>
      </el-table>     
      </div>
      </div>
    </div>
    <!-- 可开发票 -->
    <div class="to_invoice">
      <viewTitle :title="'可开发票信息'" :border="false"></viewTitle>
      <div class="invoice_table">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
          border
        >
          <el-table-column type="selection" width="65"></el-table-column>
          <el-table-column type="index" label="序号" width="120"></el-table-column>
          <el-table-column :formatter="(row) => {return $splitK(row.total_charge)}" label="累计充值金额" width="auto"></el-table-column>
          <el-table-column :formatter="(row) => {return $splitK(row.total_pay)}" label="累计代发金额" width="auto"></el-table-column>
          <el-table-column :formatter="(row) => {return  $splitK(row.invoice_money)}" label="已开发票金额" width="auto"></el-table-column>
          <el-table-column :formatter="(row) => {return $splitK(row.no_apply_invoice_money)}" label="可开发票金额" width="auto"></el-table-column>
          <el-table-column prop="zip" label="操作" fixed="right" width="auto" v-if="isApply">
            <template slot-scope="scope">
              <div class="table_operation">
                <el-button type="primary" @click="make_invoice(scope)">申请开票</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </views>
</template>


<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      protocolFileShow:false,
      //  地址列表
      address_lists: [],

      selected_enterprise_invoice_address_id:[],
      // 基本信息
      enterprise_info:{
          address: "",
          bank_account_name: "",
          bank_name: "",
          bank_sn: "",
          enterprise_code: "",
          enterprise_name: "",
          mobile: ""
      },
      //  可开发票信息
      tableData: [ ],
      multipleSelection: [],
      add_addres_show: false, // 新增地址 展示
      name: "", //  收件人姓名
      phone: "", //  手机号码
      address: "", //  收件地址
      default_address: false, // 默认地址 是否勾选
      //******************************//
      modify_show: false, //  修改发票信息  展示
      bank_list: [{ value: "选项1", label: "中国建行" }], //  银行列表
      register_phone: "", //  注册电话
      register_address: "", //  注册地址
      bank: "", //  开户银行
      //****************************//
      make_invoice_show:false,      // 申请开票  展示
      select_address:"",            // 选择地址
      select_address_list:[],            // 选择地址列表
      select_bank:"",               // 选择银行
      select_bank_list:[],          // 选择银行列表
      select_invoice_cats:"",       // 选择开票税目
      invoice_cats:[],              // 开票税目列表

      invoice_amount:"",            // 开票金额
      remark:"",                    // 备注
      apply_img:[],             //确认函地址
      img_attach: '',          //确认函附件
      dialogVisible:false,     // 图片阅览展示
      dialogVisibleImg:"",
      type:1,                  // 1 修改   2 申请  

    };
  },
  methods: {
    updatecheckbox(){
      this.selected_enterprise_invoice_address_id.shift();
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    // 新增地址
    add_address() {
      this.add_addres_show = true;
    },
    close_Model(val) {
      console.log("传入参数",val)
      this.add_addres_show = false;
      this.modify_show = false;
      this.make_invoice_show=false;
      if(val==1){
      
      this.name=""; //  收件人姓名
      this.phone=""; //  手机号码
      this.address=""; //  收件地址
      this.default_address=false; // 默认地址 是否勾选
      }
    },
    // 修改发票信息
    modify_billing_infor() {
      this.modify_show = true;
      this.type=1;
    },
    // 申请开票
    make_invoice(scope){
        console.log(this.invoice_cats);
      this.invoice_amount = scope.row.no_apply_invoice_money
      this.make_invoice_show = true;
      this.type=2
    },
    getData(){
        let {code , msg, data} = this.$api.sendSync( this.$mapapi.einvoiceIndex);
        if(code != 200&&code!=501){
            this.$message.error(msg);
            this.tableData = [];
            return;
        }
        this.address_lists = data.addr_list;
        let addr_temp = [];
        for(let val of this.address_lists){
          if(val.is_default == 1){
            this.selected_enterprise_invoice_address_id.push(val.enterprise_invoice_address_id);
            this.select_address = val.enterprise_invoice_address_id;
            val.is_default=true;
          }
          addr_temp.push({value:val.enterprise_invoice_address_id,label:val.receiver_address});
        }
        this.select_address_list = addr_temp;
        this.enterprise_info = data.enterprise_info;
        this.invoice_cats = data.invoice_cats;

        //银行信息
        let ret = this.$api.sendSync( this.$mapapi.eBankList);
        if(ret.code != 200){
            this.$message.error(ret.msg);
            this.tableData = [];
            return;
        }
        let bank_temp = [];
        for(let e of ret.data.list){
            bank_temp.push({value:e.enterprise_bank_id,label:e.bank_name});
            if(e.is_default){
                this.select_bank = this.bank = e.enterprise_bank_id;
            }
        };
        this.select_bank_list = this.bank_list = bank_temp;
        this.tableData = data.money_info;
    },
    modify_info(){
        console.log('come here3333');

        let {code , msg} = this.$api.sendSync( this.$mapapi.emodifyInvoiceSetting,{
            mobile:this.enterprise_info.mobile,
            address:this.enterprise_info.address,
            enterprise_bank_id:this.bank
        });
        if(code != 200&&code!=501){
            this.$message.error(msg);
            this.enterprise.tableData = [];
            this.close_Model();
        }else{
            this.$message.success(msg);
            this.getData()
            this.close_Model();
        }

    },
    addressCommit(){
        let {code , msg} = this.$api.sendSync( this.$mapapi.eaddEditAddress,{
            receiver_name:this.name,
            receiver_mobile:this.phone,
            receiver_address:this.address,
            is_default:this.default_address?1:0
        });
        if(code != 200&&code!=501){
            this.$message.error(msg);
            this.enterprise.tableData = [];
            this.close_Model();
        }else{
            this.$message.success(msg);
            this.selected_enterprise_invoice_address_id = [];
            this.getData()
            this.close_Model(1);
        }
    },
    applyInvoice(){
        let {code , msg} = this.$api.sendSync( this.$mapapi.eapplyInvoice,{
            enterprise_bank_id:this.select_bank,
            enterprise_invoice_address_id:this.select_address,
            invoice_category_name:this.select_invoice_cats,
            money:this.invoice_amount,
            remark:this.remark,
            apply_img:this.img_attach
        });
        if(code != 200&&code!=501){
            this.$message.error(msg);
            this.enterprise.tableData = [];
            this.close_Model();
        }else{
            this.$message.success(msg);
            this.$toRoutePath({
                path: "/invoice_log",
                edit: true,
                query: {}
            });
        }
    },
    uploadProtocolPreview(file){        //点击预览图片
        console.log("点击",file)
        this.dialogVisible=true;
        this.dialogVisibleImg=file.img;
        this.protocolFileShow = true;
    },
    uploadProtocolChange(file, fileList){
        if(this.apply_img.length > 1){
            this.apply_img.shift();
            fileList.shift();
        }
    },
    uploadProtocolSuccess(res){     //图片上传成功之后
        console.log("上传成功返回",res)
        this.apply_img.push({uid:Date.now(), img:res.data.url, name: res.data.name});
        this.img_attach = res.data.url;
    },
    removeProtocol(){           //移除协议文件列表中的文件时
        this.apply_img.pop();
        this.img_attach = '';
    },
    // 限制触发
    onExceed(){
         this.$message.error("最多上传一张");
    },
  },
  created() {},
  mounted() {
      this.getData()
  },
  computed:{
      upload_file(){          //上传图片路径
          return this.$store.getters.uploadFile;
      },
      ...mapGetters(['getButtonPermission']),
      isEditHead(){
        return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].edit_head ? 1 : 0;
      },
      isAddAddress(){
        return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].add_address ? 1 : 0;
      },
      isApply(){
        return  this.getButtonPermission[this.$route.path]  &&  this.getButtonPermission[this.$route.path].apply ? 1 : 0;
      }
  }
};
</script>

<style lang="less" :scope="true"   src="@/style/invoice/enterprise_invoice_apply.less" >
</style>
